<template>
  <div class="flex flex-col items-center justify-center h-96">
    <div class="flex flex-col space-y-4 rounded-lg bg-white p-8 bg-opacity-60 backdrop-blur-md">
      <h3 class="text-6xl font-extrabold text-red-600">404</h3>
      <h4 class="text-4xl">页面丢失了</h4>
      <p>您要的页面已经消失在宇宙尽头了，可以尝试：</p>
      <div class="flex justify-end">
        <router-link to="/">
          <Button label="返回首页" class="p-button-link" />
        </router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'NotFound'
})
</script>

<script lang="ts" setup>
import { defineComponent } from 'vue'
import Button from 'primevue/button/Button.vue'
</script>